<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="kaiji">
    <meta name="keyword" content="博客, 作者, 信息, 列表">
    <title>作者信息列表</title>
	<#include "admin/common.ftl" />
	
  </head>

  <body>

  <section id="container" class="">
      <!--header start-->
      <#include "admin/header.ftl" />
      <!--header end-->
      <!--sidebar start-->
      <#include "admin/sidebar.ftl" />
      <!--sidebar end-->
      <!--main content start-->
      <section id="main-content">
          <section class="wrapper">
              <!-- page start-->
              <div class="row">
                  <div class="col-lg-12">
                      <section class="panel">
                          <header class="panel-heading">作者信息列表</header>
                          <!-- 自定义搜索 -->
                          <div class="panel-body">
                          	  <@privUrlTag code="A001">
                              <form id="searchForm" class="form-inline" role="form">
                                  <div class="form-group">
                                      <label for="phone" class="sr-only">登录账户名</label>
                                      <input type="text" class="form-control" id="phone" name="phone" placeholder="登录账户名">
                                  </div>
                                  <div class="form-group">
                                      <label for="userName" class="sr-only">博客名</label>
                                      <input type="text" class="form-control" id="userName" name="userName" placeholder="博客名">
                                  </div>
                                  <button id="searchBtn" type="button" class="btn btn-success">查询</button>
                                  <@privUrlTag code="A00105">
	                              <button id="delBtn" type="button" class="btn btn-danger pull-right">批量删除</button>
	                              </@privUrlTag>
                                  <@privUrlTag code="A00102">
	                              <button id="addBtn" type="button" class="btn btn-success pull-right">添加</button>
	                              </@privUrlTag>
                              </form>
                              </@privUrlTag>
                          </div>
                          <!-- 结束自定义搜索 -->
                       </section>
                       <section class="panel">
                          <table class="table table-striped border-top" id="authorTable">
                          <thead>
                          <tr>
                              <th style="width:8px;"><input type="checkbox" class="group-checkable" data-set="#authorTable .checkboxes" /></th>
                              <th class="dt-body-center">序号</th>
                              <th>博客名称</th>
                              <th>真实姓名</th>
                              <th>手机号码</th>
                              <th>博客等级</th>
                              <th>来源</th>
                              <th>账号状态</th>
                              <th>操作</th>
                          </tr>
                          </thead>
                          
                          </table>
                      </section>
                  </div>
              </div>
              <!-- page end-->
	      </section>
      </section>
      <!--main content end-->
  </section>

	<!-- edit modal start -->
	 <div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="editModal" class="modal fade">
         <div class="modal-dialog">
             <div class="modal-content">
                 <div class="modal-header">
                     <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
                     <h4 class="modal-title">作者详细信息</h4>
                 </div>
                 <div class="modal-body">

                     <form role="form" class="form-horizontal" id="editForm" action="${ctx}/admin/author/update.html" method="post">
                     	<input type="hidden" name="authorId" />
                         <div class="form-group">
                             <label for="userName" class="col-sm-2 control-label">博客名</label>
                             <div class="col-sm-10">
                             <input type="text" class="form-control" name="userName" placeholder="博客名" required>
                             </div>
                         </div>
                         <div class="form-group">
                             <label for="realName" class="col-sm-2 control-label">真实姓名</label>
                             <div class="col-sm-10">
                             <input type="text" class="form-control" name="realName" placeholder="真实姓名" required>
                             </div>
                         </div>
                         <div class="form-group">
                             <label for="phone" class="col-sm-2 control-label">登录账号</label>
                             <div class="col-sm-10">
                             <input type="text" class="form-control" name="phone" placeholder="登录账号" required/>
                             </div>
                         </div>
                         <div class="form-group" style="display: none;" id="divPassword">
                             <label for="phone" class="col-sm-2 control-label">密码</label>
                             <div class="col-sm-10">
                             <input type="password" class="form-control" name="password" placeholder="登录密码" required/>
                             </div>
                         </div>
                         <div class="form-group">
                             <label for="grade" class="col-sm-2 control-label">博客等级</label>
                             <div class="col-sm-10">
                             <input type="number" class="form-control" name="grade" placeholder="博客等级" required/>
                             </div>
                         </div>
                         <div class="form-group">
                         	<div class="col-lg-offset-3 col-lg-4">
                         		<button type="submit" class="btn btn-default">保存</button>
                         		<button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                         	</div>
                         </div>
                     </form>
                 </div>
             </div>
         </div>
     </div>
	<!-- end edit modal -->

   <#include "admin/common_js.ftl" />
   <script src="${ctx}/js/jquery.validate.min.js" ></script>
   <script type="text/javascript" src="${ctx}/assets/data-tables/jquery.dataTables.js"></script>
   <script type="text/javascript" src="${ctx}/assets/data-tables/DT_bootstrap.js"></script>
   <script src="${ctx}/js/dynamic-table.js"></script>
   <script type="text/javascript">
   	$(function() {
   		var $dataTable = $("#authorTable").DataTable({
	    	ajax: {   
                url: "${ctx}/admin/author/list.html"
            },
            columns: [
                {"data": "authorId"},
                {"data": null},
                {"data": "userName"},
                {"data": "realName"},
                {"data": "phone"},
                {"data": "grade"},
                {
	                "data": "resource",
	                "render" : function(data,type, row, meta) {
						return data == 0 ? "本地网站" : data == 1 ? 
						"微博" : data == 2 ? "QQ" : data == 3 ? "微信" : data == 4 ? "GitHub" : "其他"; 
					}
                },
                {
	                	"data": "deleteStatus",
	                	"render": function(data, type, row, meta) {
	                		return data == 0 ? "正在使用" : data == 1 ? "禁用" : "错误";
	                	}	
                },
                {"data": null}
            ],
            "columnDefs": [
            	{
			        "targets": 0,
			        "className": 'dt-body-center',
			        "render": function (data, type, full, meta){
			            return '<input type="checkbox" name="ids" value="' + $('<div/>').text(data).html() + '">';
			        }
		        },
             	{
                 "targets": -1,
                 "defaultContent": "<@privUrlTag code="A00103"><button class='btn btn-primary btn-xs editBtn'><i class='icon-pencil'></i></button></@privUrlTag>&nbsp;&nbsp;"+
                 				"<@privUrlTag code="A00104"><button class='btn btn-primary btn-xs authorRole'><i class='icon-cogs'></i></button></@privUrlTag>"
             	}
		    ],
            fnDrawCallback: function(){
                var api = this.api();
            　　 var startIndex= api.context[0]._iDisplayStart;
            　　 api.column(1).nodes().each(function(cell, i) {
            　　　　    cell.innerHTML = startIndex + i + 1;
            　　 });
            		$(this).find('input[type=checkbox]').removeAttr('checked');  
            }
	      	
	    });
	    
	    //查询按钮
        $("#searchBtn").on("click", function () {
            $dataTable.draw();//查询后不需要保持分页状态，回首页
        });
	    
	    // 进入编辑
	    $("#authorTable tbody").on("click", ".editBtn", function () {
			var data = $dataTable.row($(this).parents("tr")).data();
			$("#divPassword").hide();
		    	$("#editForm").find("input[name='authorId']").val(data.authorId);
		    	$("#editForm").find("input[name='userName']").val(data.userName);
		    	$("#editForm").find("input[name='realName']").val(data.realName);
		    	$("#editForm").find("input[name='phone']").val(data.phone);
		    	$("#editForm").find("input[name='grade']").val(data.grade);
		    $("#editForm").attr("action", "${ctx}/admin/author/update.html");
		    	$("#editModal").modal("show");
		});
		
	    // 设置角色
	    $("#authorTable tbody").on("click", ".authorRole", function () {
			var data = $dataTable.row($(this).parents("tr")).data();
			location.href = "${ctx}/admin/author/role.html?authorId="+data.authorId;
			return false;
		});
		
		// 添加基本信息
		$("#addBtn").click(function() {
			$("#editForm").attr("action", "${ctx}/admin/author/save.html");
			$("input").val('');
			$("#divPassword").show();
			$("#editModal").modal("show");
		});
	    
	    $("#editForm").validate({
			rules: {
				"phone" : {
		    			required: true,
		    			digits: true,
		        		minlength: 11,
		        		maxlength: 11
		    		},
			    	"userName" : {
			    		required: true
			    	},
			    	"realName": {
			    		required: true
			    	},
			    	"grade": {
			    		required: true,
			    		digits: true
			    	}
	    	},
	    	messages: {
		   		"phone" : {
		   			required: "请输入一个整数值",
		   			digits: "只能输入整数",
			    		minlength: "只能是11位数!",
			    		maxlength: "只能是11位数!"
		   		},
		   		"userName" : {
		    		required: "请输入博客名称"
		    	},
		    	"realName": {
		    		required: "请输入真实姓名"
		    	},
		    	"grade": {
		    		required: "请输入一个整数值",
		    		digits:"只能输入整数"
		    	}
	   		},
			submitHandler: function(form) {
				$id = $("input[name='authorId']").val();
				if ($id) {
					$password = $("input[name='password']").val();
					var patrn = /^(\w){6,20}$/;
					if (patrn.exec($password)) {
						layer.alert("密码6到20位数只能是数字 字母 下划线");
						return false;
					}
				}   
				$.ajax({
					url: $(form).attr("action"),
					data: $("#editForm").serialize(),
		            type: "post",
		            dataType: "json",
		            success: function(data) {
		            	if (data.success == 0) {
							layer.alert(data.message, {icon: 5});
		            	} else {
		            		$("input").val('');
		            		$("#editModal").modal("hide");
		            		$dataTable.draw();
		            	}
		            }
				});
	   		}  
		});
		
		 // 删除
	    $("#delBtn").click(function () {
	    	var $chks = $("input[name='ids']:checked");
	    	var $ids = [];
	    	$chks.each(function(){
	    		$ids.push($(this).val());
	    	});
	    	if ($ids.length <= 0) {
	    		layer.alert("请至少选择一项!", {icon: 0});
	    		return false;
	    	}
	    	
	    	$.ajax({
				url: "${ctx}/admin/author/delete.html",
				data: {ids: $ids},
			    type: "post",
			    dataType: "json",
			    success: function(data) {
				    	if (data.success == 0) {
							layer.alert(data.message, {icon: 0});
				    	} else {
				    		layer.msg("删除成功!");
				    		$dataTable.draw();
				    	}
			    }
			});
	    });
		
   	});
	</script>
  </body>
</html>
